<template>
	<view>
		<view class="subsection">
			<u-subsection :list="list" :current="current" mode="subsection" fontSize="28" activeColor="#0062ad"
				@change="sectionChange"></u-subsection>
		</view>
		<view class="cameraBox" v-show="current == 0">
			<view v-for="menuItem in menuDataList" :key="menuItem.id">
				<!-- <roc-title :titleText="menuItem.title"></roc-title> -->
				<view class="cameraA" v-for="(item, i) in menuItem.camList" :key="i">
					<view class="camera">
						<image src="../../static/img//watch/watchBg.jpg" mode="" />
						<u-icon name="play-circle" style="position: absolute; left: 36%;top: 28%;" color="#fff"
							size="100" @click="play(item)" />
						<view class="cameraMask" style="text-align: center;width: 100%;padding: 0;">{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: center;padding-top: 100rpx;" v-if="menuDataList.length == 0">
				<image src="@/static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view>暂无数据</view>
			</view>
			<view style="width: 100%;height:var(--window-bottom);"></view>
		</view>
		<view class="cameraBox" v-show="current == 1">
			<!-- <roc-title :titleText="menuItem.title"></roc-title> -->
			<view class="cameraA" v-for="(item, i) in productList" :key="i">
				<view class="camera">
					<image src="../../static/img//watch/watchBg.jpg" mode="" />
					<u-icon name="play-circle" style="position: absolute; left: 36%;top: 28%;" color="#fff" size="100"
						@click="play(item)" />
					<view class="cameraMask" style="text-align: center;width: 100%;padding: 0;">{{ item.name }}
					</view>
				</view>
			</view>
			<view style="text-align: center;padding-top: 100rpx;" v-if="menuDataList.length == 0">
				<image src="@/static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view>暂无数据</view>
			</view>
			<view style="width: 100%;height:var(--window-bottom);"></view>
		</view>
	</view>
</template>

<script>
	import {
		getList,
		getQuery
	} from '@/api/menu.js';
	import {
		getCamList,
		getCamDataList,
		getProductCamDataList
	} from '../../api/watch.js';
	export default {
		data() {
			return {
				watchToken: '',
				menuDataList: [],
				productList: [],
				list: ['视频监控', '生产监控'],
				current: 0
			};
		},
		onLoad() {
			this.getMenuData();
			this.getProductCamDataList();
		},
		async onPullDownRefresh() {
			await this.getMenuData();
			uni.stopPullDownRefresh();
		},
		methods: {
			sectionChange(index) {
				this.current = index;
				console.log("this.current", this.current)
			},
			// 获取用户菜单
			async getMenuData() {
				// 查找 管理菜单id
				const sendObj = {
					search: JSON.stringify({
						name: 'jiankong'
					})
				};
				const {
					data: {
						data: queryData
					}
				} = await getQuery(sendObj);
				let pid = '';
				if (queryData.length) {
					pid = queryData[0].id;
				} else {
					return;
				}
				// 请求菜单
				const {
					data: {
						data
					}
				} = await getList({
					term_type: 2,
					pid
				});
				const menuDataList = data.list;
				// 请求token
				await this.getWatchToken();
				// 请求页面数据 - 组织监控数据
				menuDataList.forEach(async item => {
					const {
						data: {
							data: dataList
						}
					} = await getCamDataList({
						model_id: item.model_id
					});
					dataList.forEach(item => {
						item.url = this.handleWatchUrl(item.code, item.channel, this.watchToken);
					});
					this.$set(item, 'camList', dataList);
				});
				this.menuDataList = menuDataList;
			},
			//获取生产监控
			async getProductCamDataList() {
				const data = await getProductCamDataList({
					code: "jiankong",
					page: 1,
					page_size: 999999
				})
				this.productList = data.data.data.list
			},
			// 监控地址处理
			handleWatchUrl(code, channel, token) {
				return `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/${code}/${channel}.live&autoplay=1&accessToken=${token}`;
			},
			// 请求token
			async getWatchToken() {
				const {
					data: {
						code,
						data
					}
				} = await getCamList();
				if (code === 1) {
					this.watchToken = data.token;
				}
			},
			play(item) {
				uni.setStorageSync('watchInfo', item);
				uni.navigateTo({
					url: `/pages/watch/pullWatch`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.subsection {
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
	}

	.cameraBox {
		width: 93%;
		margin: 0 auto;
		overflow: hidden;

		.cameraA {
			width: 47%;
			display: inline-block;
			margin-right: 10px;
		}

		.camera {
			height: 125px;
			border: 1px solid #0062ad;
			box-shadow: 0px 2px 8px 0px rgba(3, 54, 93, 0.29);
			border-radius: 6px;
			margin: 10px 0;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 6px;
			}

			.cameraMask {
				width: 100%;
				height: 30px;
				line-height: 30px;
				background: #0062ad;
				opacity: 0.77;
				border-radius: 0px 0px 6px 6px;
				position: absolute;
				bottom: -1px;
				color: #fff;

				text {
					width: 80%;
					display: inline-block;
					padding-left: 10px;
				}

				image {
					width: 29px;
					height: 29px;
					vertical-align: middle;
				}
			}
		}
	}

	.roc-title {
		margin-top: 20rpx;
	}
</style>
